<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Panning Acceptance Test</title>
    <style type="text/css">
    
        body {
            font-size: 0.8em;
        }
        p {
            padding-top: 1em;
        }
        
        #evenmap {
            margin: 1em;
            float: left;
            width: 256px;
            height: 256px;
        }

        #oddmap {
            margin: 1em;
            float: left;
            width: 255px;
            height: 255px;
        }

        /* avoid pink tiles */
        .olImageLoadError {
            background-color: transparent !important;
        }

    </style>

    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>

    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
 
        var evenmap, oddmap;

        // increase reload attempts 
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;

        function init(){
            evenmap = new OpenLayers.Map('evenmap');
            var evenlayer = new OpenLayers.Layer.Google(
                "Imagery",
                {type: G_SATELLITE_MAP}
            );
            evenmap.addLayer(evenlayer);
            var epc = document.getElementById("epc");
            var emc = document.getElementById("emc");
            var ee = document.getElementById("ee");
            evenmap.events.register("moveend", null, function() {
                var px = new OpenLayers.Pixel(evenmap.size.w / 2,
                                              evenmap.size.h / 2);
                var pc = evenmap.getLonLatFromViewPortPx(px);
                pc.lon = parseFloat(pc.lon.toPrecision(6));
                pc.lat = parseFloat(pc.lat.toPrecision(6));
                var mc = evenmap.baseLayer.getOLLonLatFromMapObjectLonLat(
                    evenmap.baseLayer.mapObject.getCenter()
                );
                mc.lon = parseFloat(mc.lon.toPrecision(6));
                mc.lat = parseFloat(mc.lat.toPrecision(6));
                epc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")";
                emc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")";
                ee.innerHTML = pc.equals(mc);
            });
            evenmap.zoomToMaxExtent();

            oddmap = new OpenLayers.Map('oddmap');
            var oddlayer = new OpenLayers.Layer.Google(
                "Imagery",
                {type: G_SATELLITE_MAP}
            );
            oddmap.addLayer(oddlayer);
            var opc = document.getElementById("opc");
            var omc = document.getElementById("omc");
            var oe = document.getElementById("oe");
            oddmap.events.register("moveend", null, function() {
                var px = new OpenLayers.Pixel(oddmap.size.w / 2,
                                              oddmap.size.h / 2);
                var pc = oddmap.getLonLatFromViewPortPx(px);
                pc.lon = parseFloat(pc.lon.toPrecision(6));
                pc.lat = parseFloat(pc.lat.toPrecision(6));
                var mc = oddmap.baseLayer.getOLLonLatFromMapObjectLonLat(
                    oddmap.baseLayer.mapObject.getCenter()
                );
                mc.lon = parseFloat(mc.lon.toPrecision(6));
                mc.lat = parseFloat(mc.lat.toPrecision(6));
                opc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")";
                omc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")";
                oe.innerHTML = pc.equals(mc);
            });
            oddmap.zoomToMaxExtent();

        }

    </script>
  </head>
  <body onload="init()">
    <div id="evenmap"></div>
    <p><b>Even sized map.</b> The map on the left should pan regularly, and the
    two centers below should be equivalent.  Both dragging and panning with
    buttons should maintain the same center.</p>
    <p><b>pixel center:</b> <span id="epc"></span>
    <br /><b>map center:</b> <span id="emc"></span>
    <br /><b>equvalent:</b> <span id="ee"></span>
    </p>
    <br style="clear: both;" />

    <div id="oddmap"></div>
    <p><b>Odd sized map.</b> The map on the left should pan regularly, and the
    two centers below should be equivalent.  Both dragging and panning with
    buttons should maintain the same center.</p>
    <p><b>pixel center:</b> <span id="opc"></span>
    <br /><b>map center:</b> <span id="omc"></span>
    <br /><b>equvalent:</b> <span id="oe"></span>
    </p>
    </ul>
  </body>
</html>
